<script setup lang="ts">
import type { LogTable } from '@/types/log'
import { dateFormat } from '@/util/dict'
import { ref } from 'vue'
defineProps<{
  logInfo: LogTable
  tDict: Map<string, string>
}>()
const emit = defineEmits<{
  (event: 'cDlg'): void
}>()
</script>
<template>
  <el-descriptions :column="2">
    <el-descriptions-item :label="tDict.get('username')">
      <div class="highlight-info">{{ logInfo.username }}</div>
    </el-descriptions-item>
    <el-descriptions-item :label="tDict.get('handleName')">
      <div>{{ logInfo.handleName }}</div></el-descriptions-item
    >
    <el-descriptions-item :label="tDict.get('time')">
      <div class="highlight-success">{{ dateFormat(logInfo.time! as string) }}</div>
    </el-descriptions-item>
    <el-descriptions-item :label="tDict.get('ip')">
      <div class="highlight-success">{{ logInfo.ip }}</div>
    </el-descriptions-item>
    <el-descriptions-item :label="tDict.get('req')">
      <div class="info-ctx">{{ logInfo.req }}</div>
    </el-descriptions-item>
    <el-descriptions-item :label="tDict.get('resp')">
      <div class="info-ctx">{{ logInfo.resp }}</div>
    </el-descriptions-item>
    <el-descriptions-item :label="tDict.get('status')">
      <el-tag :type="logInfo.status! > 400 ? 'danger' : 'success'">{{ logInfo.status }}</el-tag>
    </el-descriptions-item>
  </el-descriptions>
</template>
<style scoped lang="less">
.el-descriptions-item {
  width: 100px;
}
.info-ctx {
  width: 200px;
  word-wrap: break-word;
}
</style>
